import React, { useEffect, Fragment, useCallback, useState } from "react";
import { Layout, Breadcrumb, Spin, Menu, Dropdown, Button, message } from "antd";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useLocation,
} from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  SkinOutlined,
} from "@ant-design/icons";
// import logo from './logo.svg';
// import "./App.css";

import TopHeader from "../topHeader";
import LeftSider from "../leftSider";
import routes from "../../routes";

import { Steps, Hints } from "intro.js-react";

import useStore from "../../utils/myStore";

// import Login from "./views/login/login";
import request from "../../utils/request";
import { api } from "../../utils/constants";
import Custom404 from "../../views/404";

// import {isMobile} from './utils/funtions'
// import { Mobile } from "./views/mobile/mobile";

const { Header, Footer, Sider, Content } = Layout;

export default function Main(props) {
  const {
    currentPath,
    userData,
    loading,
    collapsed,
    login,

    toggle,
  } = useStore();

  console.log(currentPath);

  useEffect(() => {
    const loginCheck = async () => {
      let res = await request.post(api.loginCheck, {});
      console.log(res);
      if(!res) {
        message.error('网络错误')
        return;
      }

      if (res.status === 0) {
        login(res.data);
      } else {
        login({});
      }
    };

    loginCheck();
  }, [currentPath]);
  console.log("userData", userData);

  const [theme, setTheme] = useState("default");

  const changeTheme = useCallback((val) => {
    //: 'default' | 'dark' | 'compact'
    console.log(theme);

    setTheme(val);
    const dom = document.getElementById("theme-link");
    console.log(dom);
    dom.rel = "stylesheet";
    dom.href = `/styles/antd.${val}.css`;
  });

  const [stepsEnabled, setStepsEnabled] = useState(true),
    hintsEnabled = true;
  const steps = [
      // {
      //   element: ".headerContainer",
      //   intro: "header step"
      // },
      {
        element: ".userInfo",
        intro: "用户信息",
      },
      {
        element: ".leftNavContainer",
        intro: "导航菜单",
      },
      {
        element: ".trigger",
        intro: "关闭/打开左侧导航菜单",
      },
      
      {
        element: ".breadcrumb",
        intro: "面包屑导航",
      },
      {
        element: ".mainContent",
        intro: "主内容区",
      },
      
      {
        element: ".changeTheme",
        intro: "切换主题",
      },
      
    ],
    hints = [
      // {
      //   element: ".headerContainer",
      //   hint: "Hello hint",
      //   hintPosition: "middle-right"
      // }
    ];
  const onExit = () => {
    setStepsEnabled(false);
  };

  return (
    <Fragment>
      <Spin size="large" tip="加载中..." spinning={loading}>
        <Steps
          enabled={stepsEnabled}
          steps={steps}
          initialStep={0}
          onExit={() => onExit()}
          options={{
            exitOnOverlayClick: false,
            exitOnEsc: false,
            showBullets: true,
            showButtons: true,
            showProgress: true,
            scrollToElement: true,
            disableInteraction: true,
            doneLabel: "完成",
            nextLabel: "下一个",
            prevLabel: "上一个",
            skipLabel: "跳过",
            // tooltipPosition:'bottom',
            // scrollPadding: 20,
          }}
        />
        <Hints enabled={false} hints={hints} />
        <Layout>
          <div className="headerContainer">
            <TopHeader></TopHeader>
          </div>
          <Layout>
            <LeftSider className="leftNavContainer" />
            <Layout>
              <Content
                style={{
                  minHeight: "calc(100vh - 200px)",
                  // backgroundColor: "white",
                }}
              >
                <Header
                  style={{
                    display: "flex",
                    alignItems: "center",
                    // backgroundColor: "white",
                    padding: "0 20px",
                  }}
                >
                  {React.createElement(
                    collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                    {
                      className: "trigger",
                      onClick: toggle,
                    }
                  )}

                  <Breadcrumb className="breadcrumb">
                    <Breadcrumb.Item>
                      <Link to="/" style={{ cursor: "pointer" }}>
                        首页
                      </Link>
                    </Breadcrumb.Item>
                    {currentPath[0] ? (
                      <Breadcrumb.Item>{currentPath[0]}</Breadcrumb.Item>
                    ) : (
                      ""
                    )}
                    {currentPath[1] ? (
                      <Breadcrumb.Item>{currentPath[1]}</Breadcrumb.Item>
                    ) : (
                      ""
                    )}
                    {/* <Breadcrumb.Item>{dirName}</Breadcrumb.Item>

                    <Breadcrumb.Item>{pageName}</Breadcrumb.Item> */}
                  </Breadcrumb>
                </Header>
                <div className='mainContent' style={{ margin: "5px 20px 20px 20px" }}>
                  {/* <TransitionGroup>

          <CSSTransition
            key={location.key}
            classNames="fade"
            timeout={300}
          > */}
                  <Switch>
                    {routes.map((route, index) => (
                      <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        children={route.component}
                      />
                    ))}
                    <Route>
                      <Custom404 />
                    </Route>
                  </Switch>
                  {/* </CSSTransition>
                      </TransitionGroup> */}
                </div>
              </Content>
              <Footer
                className={"footer"}
                style={{
                  height: "100px",
                  borderTop: "1px solid rgba(0,0,0,.06)",
                }}
              >
                {/* <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        ></a> */}
                Powered by ~~~
              </Footer>

              <div className='changeTheme' style={{ position: "fixed", right: "20px", bottom: "60px" }}>
                <Dropdown
                  overlay={
                    <Menu>
                      <Menu.Item>
                        <a
                          className={theme == "default" ? "active" : null}
                          onClick={() => {
                            changeTheme("default");
                          }}
                        >
                          默认
                        </a>
                      </Menu.Item>
                      <Menu.Item>
                        <a
                          className={theme == "dark" ? "active" : null}
                          onClick={() => {
                            changeTheme("dark");
                          }}
                        >
                          黑暗
                        </a>
                      </Menu.Item>
                      <Menu.Item>
                        <a
                          className={theme == "compact" ? "active" : null}
                          onClick={() => {
                            changeTheme("compact");
                          }}
                        >
                          紧凑
                        </a>
                      </Menu.Item>
                    </Menu>
                  }
                  placement="topCenter"
                  arrow
                >
                  <Button type="primary" shape="circle" size="large">
                    <SkinOutlined />
                  </Button>
                </Dropdown>
              </div>
            </Layout>
          </Layout>
        </Layout>
        <link id="theme-link" type="text/css" href="/styles/antd.default.css" />
      </Spin>
    </Fragment>
  );
}
